<template>
	<view class="give">
		<!-- <view class="share_box w100 flex">
			<input class="share_box_content" v-model="keyWord" placeholder="请输入商品名称" />
			<view class="share_txt" @click="onShare">
				搜索
			</view>
		</view> -->
		<!-- <view class="xilei_title s30 familytow fblod txtali">
			{{attrs.name}}123
		</view> -->
		<view class="flex align-center"
			style="height: 64rpx;background:  #F2F2EF;border-radius: 32rpx;margin: 0 24rpx 28rpx 24rpx;">
			<view class="" style="font-size: 0;margin-left: 28rpx;">
				<image style="width: 32rpx;height: 32rpx;" src="https://sz.vvv5g.com/assets/img/wxImg/searchIcon.png"
					mode=""></image>
			</view>
			<view class="" style="width: 4rpx;height: 20rpx;background: #d6d6d6;margin: 0 20rpx;">

			</view>
			<input class="flex-1" type="text" v-model="keyWord" placeholder="请输入商品名称">
			<view @click="onShare" class="flex align-center justify-center"
				style="width: 104rpx;height: 64rpx;background: linear-gradient(180deg, #ECAB68 0%, #DE9549 100%);border-radius: 32rpx;font-size: 22rpx;color: #fff;">
				搜索
			</view>
		</view>
		<view class="goods_box" v-for="(item,index) in attrsList" :key="index"
			@click="goDetail(item.id,item.number,index,item.sku.id)">
			<view class="fixed_box s22 family f500">
				{{item.discount/10}}&nbsp;折优惠
			</view>
			<view class="con_box flex">
				<!-- (item.image.indexOf('http')!=-1) -->
				<view v-if="item.sku.thumbnail" class="goods_image thumbnail11">
					<image class="w100 h100" :src="item.sku.thumbnail" mode=""></image>
				</view>
				<view v-else class="goods_image thumbnail222">
					<image class="w100 h100" :src="item.image" mode=""></image>
				</view>
				<view class="goods_detail_box">
					<view class="goods_name s30 family f500" style="font-weight: 700;">
						{{spceType(item.name,item.sku.difference,item.spec_type)}}
					</view>
					<!-- s28 -->
					<view class="default_box f500 family" style="font-size: 20rpx;" v-if="item.sku.is_def == 1">
						当前套餐默认产品
					</view>
					<!-- <view :class="[item.is_default == 0 ? 'marTop' : '','flexjus']"> -->
					<view class='flexjus'>
						<view class="goods_price s26 family f500">
							￥<text style="font-size: 36rpx;">{{item.flag==1?item.price:item.sku.price}}</text>
						</view>
						<view class="tianjia_box flexjus">
							<view class="jian_box" @click.stop="jianNum(item.number,index,'no',item)">
								<view class="jian_txt"></view>
							</view>
							<view class="num s28 family f500 txtali">
								{{item.number}}
							</view>
							<view class="jia_box txtali s40" @click.stop="jiaNum(item.number,index,'no',item)">
								+
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class=""
			style="width: 100%;padding: 20rpx 0;display: flex;justify-content: center;background: #fff;opacity: 0;margin-top: 10rpx;"
			:style="platform=='ios'?'padding-bottom:70rpx;':''">
			<view class="bottom_btn txtali s32 fblod">
				确认
			</view>
		</view>
		<view class=""
			style="position: fixed;width: 100%;padding: 20rpx 0;bottom: 0;display: flex;justify-content: center;background: #fff;"
			:style="platform=='ios'?'padding-bottom:70rpx;':''">
			<view class="bottom_btn txtali s32 fblod" @click="next">
				确认
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				attrs: {},
				attrsList: [],
				arr: 0,
				goodsId: 0,
				shopId: 0,
				totalPrice: 0,
				price: 0,
				keyWord: '',
				keyWord2: '',
				defaultPrice: 0,
				platform: '', //设备信息
				page: 1,
				lastPage: 0,
				defaultPrices: 0,
				nowprice: 0,
				isBack: true,
				oldAttrs: [],
				oldPrice: '',
				oldnowprice: '',
				oldTotalPrice: '',


				newAttrsVal: [],
				newAttrsValPrice: 0,
			}
		},
		onLoad(options) {
			console.log(options)
			this.platform = uni.getSystemInfoSync().platform;
			this.attrs = this.$store.state.give
			console.log(this.attrs)

			this.newAttrsVal = JSON.parse(JSON.stringify(this.attrs.value))

			this.oldAttrs = this.attrs
			this.attrsList = this.attrs.value;

			uni.setStorageSync('attrs', this.$store.state.give)
			this.goodsId = options.goodsId;
			this.shopId = options.shopId;
			this.price = options.price;
			this.oldTotalPrice = options.totalPrice
			this.oldnowprice = options.nowprice
			//默认价格
			if (this.prePage().defaultPrices == 0) {
				this.prePage().defaultPrices = options.price;
				this.oldPrice = options.price
			}
			//现在价格
			if (this.prePage().nowprice == 0) {
				this.prePage().nowprice = options.price;
			}

			uni.setNavigationBarTitle({
				title: this.attrs.name
			})

			this.getList();

		},
		onReachBottom() {
			if (this.page < this.lastPage) {
				this.page++;
				this.getList();
			} else {
				uni.showToast({
					title: '我是有底线的',
					icon: 'none'
				})
			}
		},
		onUnload() {
			if (this.isBack) {
				this.$store.commit('getGive', this.oldAttrs)
				this.prePage().defaultPrices = this.oldPrice
				this.prePage().nowprice = this.oldnowprice
				this.prePage().totalPrice = this.oldTotalPrice
			}
		},
		methods: {
			//
			getList() {
				this.$request({
					url: 'Package/seriesgoods',
					data: {
						id: this.attrs.id,
						goods_id: this.goodsId,
						shop_id: this.shopId,
						page: this.page,
						keyword: this.keyWord,
					}
				}).then(res => {
					let list = res.data.data.data;
					console.log(this.attrs)
					let newList = [];
					//已经存在的sku_id
					let attrsListSkusMap = {};
					
					this.attrsList.map((v, idx) => {
						let v_sku_id = v.sku_id ? v.sku_id : v.sku.id;
						attrsListSkusMap[v_sku_id] = true;
					})
					list.map((item, index) => {
						item.number = 0
						let item_sku_id = item.sku_id ? item.sku_id : item.sku.id
						if	(!attrsListSkusMap[item_sku_id]){
							newList.push(item);
						}
					})
					console.log(newList)
					
					// list.map((item, index) => {
					// 	item.number = 0
					// 	let list_sku_id = item.sku_id ? item.sku_id : item.sku.id
					// 		console.log('list_sku_id：' + list_sku_id)
					// 		console.log('is_def：' + item.is_def)
					// 	let allow = 0;
					// 	this.attrsList.map((v, idx) => {
					// 		// if (item.sku.id == v.sku.id) {
					// 		// 	item.number = v.number
					// 		// }
							
					// 		if (item.is_def == 0) {
					// 			list.unshift(list.splice(index, 1)[0])
					// 			item.sku.is_def = 1
					// 		}
							
					// 	})
					// })

					// this.attrsList = this.page == 1 ? list : this.attrsList.concat(list)
					this.attrsList = this.attrsList.concat(newList)
					// this.attrsList = list
					console.log(this.attrsList)
					this.lastPage = res.data.data.last_page;
				})
			},
			// 判断是否添加进列表
			isPush(id) {
				let boolean = true;
				for (let i = 0; i < this.attrsList.length; i++) {
					if (this.attrsList[i].id == id) {
						boolean = false;
					}
				}
				return boolean;
			},
			// 搜索
			onShare() {
				this.attrsList = []
				this.page = 1;
				this.getList()
				this.keyWord2 = this.keyWord;
				return;
				this.$request({
					url: 'package/searchSpec',
					data: {
						goods_id: this.goodsId,
						shop_id: this.shopId,
						keyword: this.keyWord,
						spec_id: this.attrs.id
					}
				}).then(res => {
					if (res.statusCode == 200) {
						this.$store.commit('getGive', res.data.data[0])
						this.attrs = this.$store.state.give
						this.attrsList = this.attrs.values
						uni.setNavigationBarTitle({
							title: this.attrs.name
						})
					}
				})
			},
			goDetail(id, number, index, sku_id) {
				console.log('sku_id：' + sku_id)
				this.$request({
					url: 'product/s_goods',
					method: 'POST',
					data: {
						id: id
					}
				}).then(res => {
					if (res.data.data.status == 'normal') {
						uni.navigateTo({
							url: `./presenter?id=${id}&number=${number}&index=${index}&sku_id=${sku_id}`
						})
					} else {
						uni.showToast({
							title: '该产品已下架',
							icon: 'none'
						})
					}
				})
			},
			checkmoney(index) {
				let sunmmoney = (Number(this.prePage(3).totalPrice * 100) - (this.attrs.value[index].sku.selling_price *
					100)) / 100;
				sunmmoney = sunmmoney.toFixed(2);

				if (sunmmoney < Number(this.prePage(3).dressList.price)) {
					return true;
				} else {
					return false;
				}
			},
			jianNum(number, index, type = 'no', e) {
				this.$request({
					url: 'product/s_goods',
					method: 'POST',
					data: {
						id: e.id
					}
				}).then(res => {
					if (res.data.data.status == 'normal') {
						if (e.number <= 0) {
							uni.showToast({
								title: '套餐内容不能为负数',
								icon: 'none'
							})
							return false;
						}
						console.log(type)
						if (type == 'yes') {
							let sunmmoney = (Number(this.prePage(3).totalPrice * 100) - (e.sku.selling_price *
								100)) / 100;
							sunmmoney = sunmmoney.toFixed(2);

							if (sunmmoney < Number(this.prePage(3).dressList.price)) {
								uni.showToast({
									title: '更改后的套系产品总价，不能低于原套系产品总价',
									icon: 'none',
									duration: 2000,
								})
								return false;
							}

							this.prePage(3).getPrice(e.sku.selling_price, 'jian');
							this.prePage(3).nowprice = Number(this.prePage(3).nowprice) - Number(e.sku
								.selling_price);
							this.prePage(3).nowprice = this.prePage(3).nowprice.toFixed(2);
						} else {
							let sunmmoney = (Number(this.prePage().totalPrice * 100) - (e.sku.selling_price *
								100) + (Number(this.newAttrsValPrice * 100))) / 100;
							sunmmoney = sunmmoney.toFixed(2);

							if (sunmmoney < Number(this.prePage().dressList.price)) {
								uni.showToast({
									title: '更改后的套系产品总价，不能低于原套系产品总价',
									icon: 'none',
									duration: 2000,
								})
								return false;
							}

							this.newAttrsValPrice -= Number(e.sku.selling_price)
							//变更金额改到确定后
							// this.prePage().getPrice(e.sku.selling_price, 'jian');
							// this.prePage().nowprice = Number(this.prePage().nowprice) - Number(e.sku
							// 	.selling_price);
							// this.prePage().nowprice = this.prePage().nowprice.toFixed(2);
						}
						this.attrsList[index].number--


						let current = this.attrsList[index];
						let current_sku_id = current.sku_id ? current.sku_id : current.sku.id


						this.newAttrsVal.map((item, index) => {
							//存在原来的记录，更改库存
							let item_sku_id = item.sku_id ? item.sku_id : item.sku.id
							if (item_sku_id == current_sku_id) {
								if (current.number == 0) {
									this.newAttrsVal.splice(index, 1)
									this.newPushAttrsVal.splice(index, 1)
								} else {
									item.number = current.number
								}
							}
						})
						//删除
						// if	(current.number == 0){
						// 	let newAttrsVal = this.newAttrsVal;
						// 	this.newAttrsVal = newAttrsVal.splice(index, 1);
						// }
						// else {
						// 	this.newAttrsVal[index] = current.number
						// }


					} else {
						uni.showToast({
							title: '该产品已下架',
							icon: 'none'
						})
					}
				})
			},
			jiaNum(number, index, type = 'no', e) {
				this.$request({
					url: 'product/s_goods',
					method: 'POST',
					data: {
						id: e.id
					}
				}).then(res => {
					if (res.data.data.status == 'normal') {
						console.log(type);
						if (type == 'yes') {
							this.prePage(3).getPrice(e.sku.selling_price)
							this.prePage(3).nowprice = Number(this.prePage(3).nowprice) + Number(e.sku
								.selling_price)
							this.prePage(3).nowprice = this.prePage(3).nowprice.toFixed(2)
						} else {
							console.log('e.sku.selling_price：' + e.sku.selling_price);
							this.newAttrsValPrice += Number(e.sku.selling_price)
							//变更金额改到确定后
							// this.prePage().getPrice(e.sku.selling_price)
							// this.prePage().nowprice = Number(this.prePage().nowprice) + Number(e.sku
							// 	.selling_price)
							// this.prePage().nowprice = this.prePage().nowprice.toFixed(2)
						}
						this.attrsList[index].number++

						let current = this.attrsList[index];
						let current_sku_id = current.sku_id ? current.sku_id : current.sku.id

						let have = 0;
						this.newAttrsVal.map((item, index) => {
							//存在原来的记录，更改库存
							let item_sku_id = item.sku_id ? item.sku_id : item.sku.id
							console.log(item_sku_id)
							
							if (item_sku_id == current_sku_id) {
								have = 1;
								item.number = current.number
							}
						})
						console.log(have)
						if (have == 0) {
							this.newAttrsVal.push(current)
						}
						// console.log(this.attrsList[index].id)

						// var current = this.attrsList[index]
						// let new_ss = this.attrs.value

						// this.prePage().dressList.attrs_list.map((item, index) => {
						// 	console.log(item.id)
						// 	console.log(this.attrs.id)
						// 	if (item.id == this.attrs.id) {
						// 		let new_item = item.value
						// 		//不存在该商品，新增
						// 		if	(current.number == 1){
						// 			item.value.push(current)
						// 		}
						// 	}
						// 	new_ss = item.value
						// })

						// this.$set(this.attrs, 'value', new_ss)
						// this.$store.commit('getGive', this.attrs)

					} else {
						uni.showToast({
							title: '该产品已下架',
							icon: 'none'
						})
					}
				})

			},
			next() {
				this.isBack = false
				// let change_price = 0
				// let ss = []
				console.log(this.attrsList);

				// this.attrsList.map((item, index) => {
				// 	if (item.number >= 1) {
				// 		ss.push(item)
				// 	}
				// })
				console.log(this.newAttrsVal)

				this.$set(this.attrs, 'value', this.newAttrsVal)
				this.prePage().dressList.attrs_list.map((item, index) => {
					if (item.id == this.attrs.id) {
						item.value = this.newAttrsVal
					}
				})


				this.prePage().getPrice(this.newAttrsValPrice)
				this.prePage().nowprice = Number(this.prePage().nowprice) + Number(this.newAttrsValPrice)
				this.prePage().nowprice = this.prePage().nowprice.toFixed(2)

				console.log(this.attrs);
				// return
				// this.$store.commit('getGive', this.attrs)
				// change_price = Number(this.prePage().nowprice) - Number(this.defaultPrices)
				// change_price = change_price.toFixed(2)

				uni.navigateBack({})
			},
			isMayJian(e) {
				if (Number(this.prePage().nowprice) <= Number(this.defaultPrices)) {
					uni.showToast({
						title: '调整产品不得低于默认产品价格',
						icon: 'none',
						duration: 2000
					})
					return false;
				} else {
					return true;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.give {
		overflow: hidden;
		padding-bottom: 200upx;

		.share_box {
			height: 100upx;
			background: #FDF9F3;
			border-radius: 34upx;
			position: fixed;
			z-index: 999;

			.share_box_content {
				width: 580upx;
				height: 68upx;
				background: #F3F3F3;
				border-radius: 34upx;
				margin-top: 20upx;
				margin-left: 28upx;
				padding-left: 24upx;
			}

			.share_txt {
				color: #000000;
				line-height: 100upx;
				margin-left: 22upx;
			}
		}

		.bottom_btn {
			width: 686upx;
			height: 100upx;
			background: #EBBE87;
			border-radius: 50upx;
			line-height: 100upx;
			color: #FFFFFF;
		}

		.xilei_title {
			width: 500upx;
			height: 60upx;
			background-color: #EBBE87;
			border-radius: 12upx;
			margin: 10upx auto;
			color: #FFFFFF;
			line-height: 60upx;
		}

		.goods_box {
			width: 686upx;
			height: 244upx;
			background: #FFFFFF;
			border-radius: 12upx;
			margin: 30upx auto;
			margin-bottom: 20upx;
			overflow: hidden;

			.fixed_box {
				width: 116upx;
				height: 50upx;
				background-color: #EBBE87;
				border-radius: 0 50upx 50upx 0;
				text-align: center;
				line-height: 50upx;
				position: absolute;
				color: #FFFFFF;
			}

			.con_box {
				margin-top: 28upx;
				margin-left: 28upx;

				.goods_image {
					width: 188upx;
					height: 188upx;
					border-radius: 8upx;
					overflow: hidden;
				}

				.goods_detail_box {
					width: 400upx;
					margin-left: 20upx;

					.goods_name {
						color: #000000;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-top: 6upx;
					}

					.default_box {
						width: 200upx;
						height: 44upx;
						background: #EBBE87;
						border-radius: 8upx;
						text-align: center;
						line-height: 44upx;
						color: #FFFFFF;
						margin-top: 24rpx;
					}

					.marTop {
						margin-top: 66upx;
					}

					.goods_price {
						color: #FF3F4A;
						margin-top: 30upx;
					}

					.tianjia_box {
						width: 150upx;
						height: 36upx;
						border: 2upx solid #EBBE87;
						margin-top: 30upx;

						.jian_box {
							width: 36upx;
							height: 36upx;
							background: #EBBE87;
							margin: 0;
							padding: 0;

							.jian_txt {
								width: 20upx;
								height: 4upx;
								background: #FFFFFF;
								margin: 50% auto;
							}
						}

						.num {
							line-height: 36upx;
						}

						.jia_box {
							width: 36upx;
							height: 36upx;
							background: #EBBE87;
							line-height: 32upx;
							color: #FFFFFF;
						}
					}
				}
			}
		}
	}
</style>
<style>
	page {
		background: #FDF9F3;
	}
</style>